<template>
	<view>
		<h4>天干五合</h4>
		<span id="s1">
			甲己 - 土
		</span>
		<span id="s2">
			乙庚 - 金
		</span>
		<span id="s3">
			丙辛 - 水
		</span>
		<span id="s4">
			丁壬 - 木
		</span>
		<span id="s5">
			戊癸 - 火
		</span>
		<h4>地支六合</h4>
		<span id="s1">
			子丑 - 土
		</span>
		<span id="s2">
			午未 - 土
		</span>
		<span id="s3">
			寅亥 - 木
		</span>
		<span id="s4">
			卯戌 - 火
		</span>
		<span id="s5">
			辰酉 - 金
		</span>
		<span id="s6">
			巳申 - 水
		</span>
		<br />
		<h4>地支相刑</h4>
		<div id="d1" class="dz">
			寅刑巳 巳刑申 申刑寅 为无恩之刑
		</div>
		<div id="d2" class="dz">
			未刑丑 丑刑戌 戌刑未 为恃势之刑
		</div>
		<div id="d3" class="dz">
			子刑卯 卯刑子 为无礼之刑
		</div>
		<h4>地支相害</h4>
		<span id="s1">
			子未相害
		</span>
		<span id="s2">
			丑午相害
		</span>
		<span id="s3">
			寅巳相害
		</span>
		<span id="s4">
			卯辰相害
		</span>
		<span id="s5">
			申亥相害
		</span>
		<span id="s6">
			酉戌相害
		</span>
		<h4>地支遁藏</h4>
		<view class="dzdc">
			<view class="dzdc0">
				子 - 癸
			</view>
			<view class="dzdc1">
				丑 - 己辛癸
			</view>
			<view class="dzdc1">
				寅 - 甲丙戊
			</view>
		</view>
		<view class="dzdc">
			<view class="dzdc0">
				卯 - 乙
			</view>
			<view class="dzdc1">
				辰 - 戊乙癸
			</view>
			<view class="dzdc1">
				巳 - 丙戊庚
			</view>
		</view>
		<view class="dzdc">
			<view class="dzdc0">
				午 - 丁己
			</view>
			<view class="dzdc1">
				未 - 己丁乙
			</view>
			<view class="dzdc1">
				申 - 庚壬戊
			</view>
		</view>
		<view class="dzdc">
			<view class="dzdc0">
				酉 - 辛
			</view>
			<view class="dzdc1">
				戌 - 戊辛丁
			</view>
			<view class="dzdc1">
				亥 - 壬甲
			</view>
		</view>
		<h4>生男生女</h4>
		<div id="ss1" class="dz">
			男以七杀为子，官星为女。女以七杀为女，官星为子。
		</div>
		<div id="ss2" class="dz">
			男以伤官为女，食神为子。女以伤官为子，食神为女。
		</div>
		<div id="ss3" class="dz">
			男取时干克日干为子，日干克时干、日时相生相合与比劫为女。
		</div>
		<div id="ss4" class="dz">
			女取日干克时干为子，日干与时干相生相合与比劫为女。
		</div>
	</view>
</template>

<script lang="ts">
	export default {
		data() {
			return {}
		},

		// 页面周期函数--监听页面加载
		onLoad() { },
		// 页面周期函数--监听页面初次渲染完成
		onReady() { },
		// 页面周期函数--监听页面显示(not-nvue)
		onShow() { },
		// 页面周期函数--监听页面隐藏
		onHide() { },
		// 页面周期函数--监听页面卸载
		onUnload() { },
		// 页面处理函数--监听用户下拉动作
		// onPullDownRefresh() { uni.stopPullDownRefresh(); },
		// 页面处理函数--监听用户上拉触底
		// onReachBottom() {},
		// 页面处理函数--监听页面滚动(not-nvue)
		// onPageScroll(event) {},
		// 页面处理函数--用户点击右上角分享
		// onShareAppMessage(options) {},
	}
</script>

<style scoped>
	h4 {
		padding: 10px;
		padding-bottom: 2px;
		color: blue;
	}

	span {
		padding-left: 20px;
		padding-bottom: 8px;
	}
	.dzdc{
		display: flex;
		flex-direction: row;
	}
	.dzdc1{
		padding-left: 20px;
		width: 85px;
	}
	.dzdc0{
		padding-left: 20px;
		width: 70px;
	}

	.dz {
		padding-left: 20px;
		padding-bottom: 8px;
		padding-right: 5px;
	}
</style>